<template>
<div class="app">
  <header>
    <h4>猫眼电影</h4>
    <nav>
      <div class="left">
        <router-link to="/place">{{city}}></router-link>
      </div>
      <ul>
        <li><router-link to="/home/move/hot">热映</router-link></li>
        <li><router-link to="/home/move/cinema">影院</router-link></li>
        <li><router-link to="/home/move/plan">待映</router-link></li>
        <li><router-link to="/home/move/classics">经典电影</router-link></li>
      </ul>
    </nav>
  </header>
  <section>
    <router-view />
 </section>
</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: [],
      city: localStorage.getItem('city') || '北京'
    }
  },
  mounted () {
    axios.post('/datalist').then(res => {
      // console.log(res.data.movieList)
      this.list = res.data.movieList
    })
  }
}
</script>

<style lang="less" scoped>
.app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header{
  width: 100%;
  height: 100px;
  background: #e54847;
  h4{
    text-align: center;
    line-height: 50px;
  }
  nav{
    display: flex;
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #EEE;
    .left{
      line-height: 50px;
      text-align: center;
    }
    ul{
      flex: 1;
      display: flex;
      li{
        line-height: 40px;
        font-size: 18px;
        padding: 7px 14px;
        a{
          width: 100%;
          height: 100%;
          &.router-link-active{
            border-bottom: 2px solid #e54847;
          }
        }
      }
    }
  }
}
section{
  flex: 1;
  overflow: auto;
  overflow-y: auto;
  .left{
      width: 100px;
      height: 100%;
      img{
          width: 100%;
          height: 100%;
      }
  }
  .ite{
      padding: 10px;
      display: flex;
  }
  .right{
      padding-left: 10px;
      line-height: 30px;
  }
}
</style>
